{% extends 'basepl.html' %}
{% load static %}
{% block head %}
    <title>学生课程表</title>
    <style>
    #d1{
        border: gray solid;

        {#position: absolute;#}
        width:60px ;
        left: 280px;
        top: 80px;
    }
    #d2{
        border: gray solid;

        {#position: absolute;#}
        width:700px ;
        height: 305px;
        left: 340px;
        top: 80px;
    }
    td{
        font-size: 13px;
    }
    #roll{

            position: absolute;
            padding-right:10px;
            overflow-y:auto;
            padding-left:10px;
            SCROLLBAR-FACE-COLOR:#ffffff;
            font-size:11pt;
            padding-bottom:0;
            scrollbar-highlight-color:#ffffff;
            scrollbar-shadow-color:#919192;
            color:black;
            scrollbar-3dlight-color:#ffffff;
            line-height:100%;
            scrollbar-arrow-color:#919192;
            padding-top:0;
            scrollbar-track-color:#ffffff;
            font-family: 宋体;
            scrollbar-darkshadow-color:#ffffff;
            letter-spacing:1pt;
            height:580px;
            width: 680px;
            top: 20px;
            left:340px ;
            align-items: center;
        {#border: #666666 solid;#}
    }

    </style>

{% endblock head%}
{% block nav %}
<li><a href="/stuIndex">首页</a></li>
<li><a href="#top">大学课程教学过程管理系统</a></li>
<li><a href="/">切换账号</a></li>
<li><a href="#">&#9658;&#9668;</a></li>
<li><a href="#">关于</a></li>
<li><a href="/">注销</a></li>
{% endblock nav %}
{% block li %}
<li><a href="/skebiao">课&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;表</a></li>
<li><a href="/stuIndex/stuGrade">成&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;绩</a></li>

<li><a href="/stuIndex/xuanke">选&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;课</a></li>
{% endblock li%}

{% block section %}
<div id="roll">
        <table cellpadding="10" border="1px">
            <tr>

                <th colspan="2" width="60">课程序号</th>
                <th width="100">课程</th>
                <th width="100">教师</th>
                <th width="180">大纲</th>
            </tr>
            {% for foo in cn %}
            <tr>
            <td class="{{ foo.id }}"><input id="check" type="checkbox"></td>
            <td>{{ foo.id }}</td>
            <td>{{ foo.cname }}</td>
            <td>{{ foo.tname }}</td>
            <td>{{ foo.dagang }}</td>
            </tr>
            {% endfor %}
        <tr><td>全选<input id="all" type="checkbox"></td><td colspan="3"></td>
            <td><a id="certain" href="/stuIndex/xuanke" >确定</a></td></tr>
        </table>
    </div>
    <script src="{% static '/jquery.min.js' %}"></script>
    <script>


    </script>
    <script>
         $(function () {
           $('#all').click(function () {
                state = $(this).prop('checked');
                $(':checkbox:not(#all)').prop('checked', state);
           });
           $(':checkbox:not(#all)').click(function () {
               if ($(this).prop('checked')) {
                   if ($(':checked').length + 1 == $(':checkbox'.length)) {
                       $('#all').prop('checked', true);
                   }else {
                        $('#all').prop('checked', false);
                   }
               }
           });
         })
    </script>
    <script>
    $(':checkbox').click(function () {
        var href = '/xuanke/course?cid=';
        var prelen = href.length;
        $(':checkbox').each(function () {
            if ($(this).prop('checked')) {
                if ($(this).attr('id') != 'all') {
                    var id = $(this).parent().next().text();
                    href = href + id + '_'
                } else {
                    $(':checkbox:not(#all)').each(function () {
                         var id = $(this).parent().next().text();
                         href = href + id + '_'
                    })
                }
            }

        });
        if (href.length > prelen) {
            var str = href.substring(0, href.length-1);
            $('#certain').attr('href', str);
        }
    })
    </script>


{% endblock section%}
